<script setup>
import RoleSelect from '@/views/RoleSelect.vue';
import axios from 'axios';
import { showMsg } from '@/components/Util';
import { computed, ref } from 'vue';
let props = defineProps(['menu','type','title','list2']);
let emits = defineEmits(['submit','close'])
// let obj = computed(()=>{
//     return props.menu;
// })
let obj = ref({
    title:'',
    path:'',
    icon:'',
    pid:'',
    auth:'',
    id:''
})
let arr = ref([])
    axios.get('/api/role_list').then(res=>{
        console.log(res);
        if(res.data.status==200){
            arr.value=res.data.data
        }
        
    })
function sub(){
    axios.post('/api/add_menu',obj.value,{
        headers:{
            "Content-Type":"application/json"
        }
    }).then(res=>{
        if(res.data.status==200){
            emits('submit');
        }else{
            showMsg(res.data.msg,'warn',2000);
        }
    })
}
function edit(){
    axios.put('/api/menu_update',obj.value,{
        headers:{
            "Content-Type":"application/json"
        }
    }).then(res=>{
        if(res.data.status==200){
            emits('submit');
        }else{
            showMsg(res.data.msg,'warn',2000);
        }
    })
}
</script>
<template >
<div class="box">
    <div class="title">
        <span class="aa">{{ title }}</span>
        <img src="../../assets/img/xx.png" class="dd" alt="" @click="emits('submit')">
    </div>


    <input type="text" placeholder="标题" v-model="obj.title" class="bb">
    <input type="text" placeholder="图标" v-model="obj.icon" class="bb">
    <input type="text" placeholder="上级菜单" v-model="obj.pid" class="bb">
    <datalist id="pl">
        <option value="0"></option>
        <option :value="item.id" v-for="item in list2">{{ item.title }}</option>
    </datalist>
    <datalist id="plz">
        <option value="0"></option>
        <option v-for="item in arr" :value="item.roleName">{{ item.roleName }}</option>
    </datalist>
    <input type="text" placeholder="角色" v-model="obj.auth" class="bb" list="plz">
        
    <input type="text" placeholder="路由" v-model="obj.path" class="bb">
    <RoleSelect v-model:val="obj.auth"></RoleSelect>
    <input  v-if="type=='new'" type="button"  value="提交"      @click="sub"   class="bb">
    <input  v-if="type=='edit'" type="button" value="提交修改"  @click="edit"  class="bb">
</div>
</template>
<style scoped>
.box{
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  background-color: white;
  position: absolute;
  margin: 10% 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.title>.aa{
    font-size: 20px;
    color: #0aa;
    font-weight: bold;
    float: left;
}
.box>.title{
    width: 270px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.sex{
    width: 280px;
    font-weight: bold;
    font-size: 20px;
}
.title>img{
    width: 25px;
    height: 25px;
}
.box>.bb{
    background-color: #eee;
    width: 270px;
    height: 30px;
}
.box>.cc{
    background-color: #0aa;
    width: 280px;
    height: 35px;
    color: white;
}
</style>